<template>
  <div class="course">
    <div style="width:100%;position:fixed;top:0;backgroudn:white;zIndex:99">
      <Title2>
      <span slot="title">特色课</span>
      <van-icon name="search" slot="search" />
    </Title2>
    <van-dropdown-menu active-color="orange">
      <van-dropdown-item title="分类" ref="kinds">
        <div class="parent-box">
          <div class="tm-kind" v-for="(item,index) in attrclassify" :key="item.id">
            <p>{{item.name}}</p>
            <div class="tmk-item">
              <span
                :class="attr_val_id['arrt'+index]==it.id?'active':''"
                v-for="it in item.child"
                :key="it.id"
                @click="selectId(it.id,'arrt'+index)"
              >{{it.name}}</span>
            </div>
          </div>
          <div class="seach-btn">
            <van-button>重置</van-button>
            <van-button type="warning" @click="aaa">确定</van-button>
          </div>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="排序" ref="sort">
        <ul class="course-sort">
          <li
            :class="order_by == item.value ? 'active':''"
            v-for="item in option"
            :key="item.value"
            @click="selectType('sort',item.value)"
          >{{item.text}}</li>
        </ul>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="filter">
        <div class="filter-box">
          <div class="tm-kind">
            <div class="tmk-item">
              <div
                :class="course_type == item.type ? 'active':''"
                v-for="item in course_types"
                :key="item.type"
                @click="selectType('filter',item.type)"
              >{{item.value}}</div>
            </div>
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    </div>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <Card2 :data="courses" />
    </van-list>
  </div>
</template>

<script>
import Title2 from "../components/common/Title2";
import Card2 from "../components/common/Card2";
// import BScroll from "better-scroll";
import { getClassify,courseBasis } from "../untils/netWork";
export default {
  components: {
    Title2,Card2
  },
  data: () => ({
    option: [
      { text: "综合排序", value: 0 },
      { text: "最新", value: 1 },
      { text: "最热", value: 2 },
      { text: "价格从低到高", value: 3 },
      { text: "价格从高到低", value: 4 }
    ],
    course_types: [
      { type: 0, value: "全部" },
      { type: 2, value: "大班课" },
      { type: 3, value: "小班课" },
      { type: 4, value: "公开课" },
      { type: 5, value: "点播课" },
      { type: 7, value: "面授课" },
      { type: 8, value: "音频课" },
      { type: 9, value: "系统课" },
      { type: 10, value: "图文课" },
      { type: 11, value: "会员课" }
    ],
    attrclassify: [],
    classify_id: "",
    attr_val_id: {},
    order_by: "",
    course_type: 0,
    courses: [],
    // params: {},
    loading:false,
    finished:false,
    page: 1,//当前页数
    limit: 10,//每页多少条数据
    lastPage:0,//最后一页
  }),
  methods: {
    onLoad() {
        // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      
        setTimeout(() => {
          // if(this.page<=this.lastPage)
          // this.page++;
          // this.getCourseBasisHttp1()
        }, 500);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        // if (this.list.length >= 40) {
        //   this.finished = true;
        // }
    },
    aaa(){
      this.$refs.kinds.toggle()
      this.getCourseBasisHttp1()
    },
  
    // 分类中选择方法
    selectId(id, data) {
      this.$set(this.attr_val_id, data, id);
    },
    objToStr(obj, str = ",", attr, len) {
        let result = ''
        if (attr) {
            for (let i = 0; i < obj.length; i++) {
                if (len && len < i) {
                    result += "等"
                    break
                }
                if (obj[i][attr]) {
                    result += obj[i][attr] + str
                }
            }
        } else {
            for (let i in obj) {
                if (obj[i]) {
                    result += obj[i] + str;
                }
            }
        }
        if (result) result = result.substr(0, result.length - 1);
        return result;

    },
    // 筛选方法
    selectType(name, val) {
      if (name == "filter") {
        this.course_type = val;
        this.$refs.filter.toggle()
      } else {
        this.order_by = val;
        this.$refs.sort.toggle()
      }
      this.getCourseBasisHttp1();
    },
    getClassifyHttp(){
      getClassify().then(res => {
        this.attrclassify = res.data.attrclassify;
      });
    },
    getCourseBasisHttp1(){
      
      var data={
        course_type: this.course_type != 11 ? this.course_type : 0,
        classify_id: this.classify_id,
        order_by: this.order_by,
        is_vip: this.course_type == 11 ? 1 : 0,
        attr_val_id: this.objToStr(this.attr_val_id, ","),
        page: this.page,
        limit: this.limit,
      }
      // console.log(data.attr_val_id)
      courseBasis(data).then(res=>{
        this.courses=res.data.list;
        console.log(res)
        this.lastPage=res.data.last_page
        console.log(this.lastPage)
      })
    }
    
  },
  mounted() {
    this.getClassifyHttp()
  }
};
</script>

<style lang="scss" scoped>
.course {
  // width: 100%;
  // height: 616px;
  // overflow: hidden;
  background: rgb(240, 240, 240);
  .van-list{
    padding: 100px 10px 0;
  }
  .active {
    color: orange;
  }
  .parent-box {
    width: 100%;

    .tm-kind {
      width: inherit;
      padding-bottom: 5px;
      border-bottom: 1px solid rgb(240, 240, 240);
      p {
        width: inherit;
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        font-size: 14px;
      }
      .tmk-item {
        width: inherit;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: wrap;
        span {
          display: block;
          width: 50px;
          height: 30px;
          background: rgb(240, 240, 240);
          margin: 5px 10px;
          text-align: center;
          line-height: 30px;
          border-radius: 5px;
        }
      }
    }
    .seach-btn {
      width: inherit;
      height: 50px;
      line-height: 50px;
      text-align: center;
      .van-button {
        width: 150px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
      }
    }
  }
  .course-sort {
    width: inherit;
    box-sizing: border-box;
    padding: 0 10px;
    li {
      width: inherit;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid rgb(240, 240, 240);
      font-size: 15px;
    }
  }
  .filter-box {
    width: inherit;
    .tmk-item {
      width: inherit;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-flow: wrap;
      box-sizing: border-box;
      padding: 10px 15px;
      div {
        width: 70px;
        height: 30px;
        background: rgb(240, 240, 240);
        margin: 5px 7px;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
      }
    }
  }
}
</style>